<!-- 拖拽功能测试 -->
<template>
  <div>
      <div class="dropContent" @drop="drop($event)"  @dragover='allowDrop($event)'>
      <draggable v-model="tags" :move="getdata" @update="datadragEnd">
          <transition-group>
               <div v-for="(element,index) in tags" :key="index" style="position:relative;" class="oneElement">
                   <span v-html="elementPack(element.type,index)">
                   </span>
                   <span class="delectElement" @click="delectElement(index)">X</span>
               </div> 
          </transition-group>
      </draggable>
      </div>
      <div>拖动到指定DIV</div>
      <div>
        <div class="drag-content">
            <div class="select-item" draggable="true" @dragstart="drag($event)" style="width:60px;border:1px solid #ccc;" data-type="title">导航</div>
            <div class="select-item" draggable="true" @dragstart="drag($event)" style="width:60px;border:1px solid #ccc;" data-type="slider">轮播图</div>
            <div class="select-item" draggable="true" @dragstart="drag($event)" style="width:60px;border:1px solid #ccc;" data-type="footer">页脚</div>
        </div>
      </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
let dom = ""
export default {
    
  data () {
    return {
        tags:[
            {id:0,type:"title",bgcolor:'#334455',menus:[{name:"关于我们"},{name:"产品服务"},{name:"新闻动态"},{name:"联系我们"}]},
            {id:1,type:"slider",imgs:[{src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531543567566&di=e62836250412cc6225b995656b15b0d9&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F72f082025aafa40f99d4e82aa764034f78f01932.jpg'}]},
            {id:2,type:"footer"}],
        elementTemplate:{
            title:{id:0,type:"title",bgcolor:'#334455',menus:[{name:"关于我们"},{name:"产品服务"},{name:"新闻动态"},{name:"联系我们"}]},
            slider:{id:1,type:"slider",imgs:[{src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531543567566&di=e62836250412cc6225b995656b15b0d9&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F72f082025aafa40f99d4e82aa764034f78f01932.jpg'}]},
            footer:{id:2,type:"footer"},
            header:{id:3,type:"header",logotype:2,logo:{img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2381740074,3012066882&fm=27&gp=0.jpg',text:'北京大学',fontSize:'21',fontSize2:'12'},waiter:{img:"",phoneNum:'',time:''}}
        }
    };
  },
  computed: {

  },

  components: {
      draggable
  },


  methods: {
          elementPack(type,index){
          switch(type){
              case 'title':
              var menus = "<ul>"
                for(var i = 0,len=this.tags[index].menus.length;i<len;i++){
                    menus = menus + '<li>'+this.tags[index].menus[i].name+'</li>'
                }
                menus = menus + '</ul>'
                return `<div class="title section">
                <ul>${menus}</ul>
                </div>`
              case 'slider':
              return `<div class="slider section"><img src="${this.tags[index].imgs[0].src}"/></div>`
              case 'footer':
              return `<div class="footer">我是一个尾部标签标签</div>`
              case 'header':
              var content = ""
              if(this.tags[index].logotype==0){
            
              }else if(this.tags[index].logotype==1){

              }else if(this.tags[index].logotype==2){

              }
              return `<div class="header">
              </div>`
          }
      },
      getdata(evt){
      },
      datadragEnd(evt){
      },
      drag(event){
          console.log(event)
          dom = event.target.dataset.type
      },
      drop(event){
          console.log(event)
        switch(dom){
            case 'title':
            this.tags.push(this.elementTemplate[dom])
            case 'slider':
            this.tags.push(this.elementTemplate[dom])
            case 'footer':
            this.tags.push(this.elementTemplate[dom])
            break;
        }
        dom = ""
      },
      allowDrop(event){
          event.preventDefault();
          
      },
      delectElement(index){
          this.tags.splice(index,1)
      }
  }
}

</script>
<style>
.title{
    width: 100%;
    background:#3344ef;
    color: white;
    font-weight: bold;
}
.title ul li{
  list-style: none;
  display: inline-block;
  padding: 10px 30px;
}
.slider{
    width: 100%;
    height: 400px;;
}
.slider img{
    width: 100%;
    height: 100%;
}
.dropContent{
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    box-shadow: 2px 2px 2px 2px #ccc;
    overflow: scroll;
}
.delectElement{
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid white;
   visibility: hidden;
   color: white;
}
.oneElement:hover .delectElement{
    visibility: visible;

}
.delectElement:hover{
    color: red;
    border: 1px solid red;
}
</style>